<script setup>
import { onMounted } from "vue";
import ProductItem from "@/components/mall/secondLevel/product/productItem.vue";
const props = defineProps({
	productData: {
		type: Array,
		required: true
	}
})
function onClickClear(){
	console.log("clear");
}
onMounted(()=>{
	console.log('inactive data', props.productData);
})
</script>

<template>
	<view class="inactive-goods">
		<view class="flex inactive-goods__top">
			<text class="inactive-goods__top-text">已失效商品</text>
			<text class="inactive-goods__top-text" @click="onClickClear">清空</text>
		</view>
			
		<product-item 
			v-for="(data, idx) in productData" 
			:product-data="data"
			:idx-of-product="idx"
			:is-inactive="true"
		/>
	</view>
</template>

<style scoped lang="scss">
.inactive-goods{
	margin: 10rpx 10rpx 10rpx 10rpx;
	padding: 20rpx 20rpx 20rpx 20rpx;
	border-radius: 40rpx;
	background-color: #ffffff;
	&__top{
		justify-content: space-between;
		margin-bottom: 60rpx;
		margin-top: 20rpx;
		&-text{
			font-size: 14px;
			font-weight: bold;
		}
	}
}
</style>